<template>
  <!-- 归档信息管理页面 -->
  <div class="markCreationEdit">
    <!-- 头部 -->
    <div class="info-top">
      <div class="info-top-left">
        <div class="line"></div>
        <span class="fileinfo">{{ markTitle }}</span>
        <div class="info-top-right">
          <el-button
            type="primary"
            class="btn-hongse"
            :disabled="disabled"
            @click="saveDate(0)"
            ><i class="el-icon-edit el-icon--left"> 暂存</i></el-button
          >
          <el-button
            type="primary"
            class="btn-lanse"
            :disabled="disabled"
            @click="saveDate(1)"
            ><i class="el-icon-check el-icon--left"> 提交</i></el-button
          >
          <el-button class="close" @click="closeFN">返回</el-button>
        </div>
      </div>
    </div>
    <!-- 分割线 -->
    <div class="divider">
      <el-divider></el-divider>
    </div>
    <!-- 中间 -->
    <div class="info-center">
      <span class="info-center-text">基本信息</span>
      <div class="info-center-form">
        <el-form
          style="width: 60%"
          :label-position="labelPosition"
          label-width="80px"
          :model="formLabelAlign"
        >
          <el-form-item label="名称:" class="info-center-form-text">
            <el-input
              v-model="formLabelAlign.name"
              class="info-center-form-input"
              placeholder="名称不可重复,具有唯一性"
            ></el-input>
          </el-form-item>
          <el-form-item label="标签性质:" class="info-center-form-text">
            <el-select
              filterable
              allow-create
              default-first-option
              class="info-center-form-input"
              v-model="formLabelAlign.nature"
              placeholder="标签属性/业务属性"
              @blur="selectBlursensorCode($event)"
            >
              <el-option label="基本属性" value="基本属性"></el-option>
              <el-option label="业务属性" value="业务属性"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="值类型:" class="info-center-form-text">
            <el-select
              filterable
              allow-create
              default-first-option
              class="info-center-form-input"
              v-model="formLabelAlign.valueType"
              placeholder="请输入值类型"
              @blur="selectBlursensorCode($event)"
            >
              <el-option label="自由文本" value="自由文本"></el-option>
              <el-option label="数值型" value="数值型"></el-option>
              <el-option label="日期时间性" value="日期时间性"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="值域:" class="info-center-form-text">
            <el-input
              v-model="formLabelAlign.ranges"
              class="info-center-form-input"
              placeholder="请输入人员标识或姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="验证规则:" class="info-center-form-text">
            <el-input
              v-model="formLabelAlign.proofRule"
              class="info-center-form-input"
              placeholder="请输入验证规则"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      labelPosition: "left",
      // title: "新建信息",
      formLabelAlign: {
        name: "",
        nature: "",
        valueType: "",
        ranges: "",
        proofRule: "",
        projectName: "",
        creator: "",
      },
      tabID: null,
      parentId: null,
      disabled: false,
      row: null,
    };
  },
  computed: {
    ...mapState({
      // markId: (state) => state.common.markId,
      // userName: (state) => state.common.userName,
      markTitle: (state) => state.common.markTitle,
    }),
  },
  activated() {
    this.clear();
    this.$store.commit("setmarkTitle", this.$route.query.title);
    this.tabID = this.$route.query.id;
    this.parentId = this.$route.query.parentId;
    this.creator = this.$route.query.userName;
    this.formLabelAlign.creator = this.creator;
    this.row = this.$route.query.row;
    if (this.tabID == 2) {
      this.editFn();
    }
  },
  mounted() {
    this.tabID = this.$route.query.id;
    this.parentId = this.$route.query.parentId;
    this.creator = this.$route.query.userName;
    this.formLabelAlign.creator = this.creator;
    this.row = this.$route.query.row;
    if (this.tabID == 2) {
      this.editFn();
    }
  },
  methods: {
    closeFN() {
      this.$router.go(-1);
    },
    clear() {
      this.formLabelAlign = {
        name: "",
        nature: "",
        valueType: "",
        ranges: "",
        proofRule: "",
        projectName: "",
        creator: "",
      };
    },
    editFn() {
      this.parentId = "";
      // console.log(this.row);
      this.formLabelAlign.id = this.row.id;
      this.formLabelAlign.name = this.row.name;
      this.formLabelAlign.nature = this.row.nature;
      this.formLabelAlign.valueType = this.row.valueType;
      this.formLabelAlign.ranges = this.row.ranges;
      this.formLabelAlign.proofRule = this.row.proofRule;
    },
    // 0暂存  1提交
    saveDate(ids) {
      // console.log(this.formLabelAlign);
      if (
        this.formLabelAlign.name == "" ||
        this.formLabelAlign.nature == "" ||
        this.formLabelAlign.ranges == "" ||
        this.formLabelAlign.proofRule == "" ||
        this.formLabelAlign.creator == ""
      ) {
        this.$message({
          showClose: true,
          message: "基本信息不能为空",
          type: "warning",
        });
        return;
      }
      if (this.tabID == 1) {
        //新建
        this.disabled = true;
        this.formLabelAlign.state = ids;
        this.formLabelAlign.parentId = this.parentId;
        this.$api
          .addList(this.formLabelAlign)
          .then((res) => {
            if (res.code == "200") {
              this.disabled = false;
              this.$router.push({
                path: "/markCreation",
              });
              this.$message({
                showClose: true,
                message: res.msg,
                type: "success",
              });
            } else {
              this.disabled = false;
              this.$message({
                showClose: true,
                message: res.msg,
                type: "error",
              });
            }
          })
          .catch((res) => {
            this.disabled = false;
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          });
      } else {
        //编辑
        this.disabled = true;
        this.formLabelAlign.parentId = this.parentId;
        this.formLabelAlign.state = ids;
        this.$api
          .updateList(this.formLabelAlign)
          .then((res) => {
            if (res.code == "200") {
              this.disabled = false;
              this.$router.push({
                path: "/markCreation",
              });
              this.$message({
                showClose: true,
                message: res.msg,
                type: "success",
              });
            } else {
              this.disabled = false;
              this.$message({
                showClose: true,
                message: res.msg,
                type: "error",
              });
            }
          })
          .catch((res) => {
            this.disabled = false;
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          });
      }
    },
    selectBlursensorCode(e) {
      // console.log(e,'eee')
    },
  },
};
</script>

<style lang="scss" scoped>
.el-button--primary {
  width: 110px;
  height: 44px;
}
.el-button + .el-button,
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
  width: 110px;
  height: 44px;
}
.markCreationEdit {
  overflow: hidden;
  .el-form-item {
    margin-bottom: 10px;
  }

  //头部
  .info-top {
    margin-top: 20px;
    margin-left: 30px;
    .info-top-left {
      .line {
        width: 4px;
        height: 20px;
        background: #3386fe;
        opacity: 1;
        border-radius: 0px;
        float: left;
        margin-top: 2px;
      }
      .fileinfo {
        margin-left: 10px;
        width: 88px;
        height: 30px;
        font-size: 22px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        line-height: 0px;
        color: #1a2e44;
        opacity: 1;
      }
    }
    .info-top-right {
      float: right;
      margin-top: -10px;
      margin-right: 30px;
    }
  }
  //中间
  .info-center {
    margin-left: 45px;
    .info-center-text {
      width: 72px;
      height: 25px;
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      line-height: 0px;
      color: #3386fe;
      opacity: 1;
    }
    .info-center-form {
      margin-top: 10px;
      .info-center-form-text {
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 0px;
        color: #1a2e44;
        opacity: 1;
      }
      .info-center-form-input {
        width: 446px;
        height: 44px;
      }
    }
  }
  //底部
  .info-bottom {
    margin-left: 45px;
    .info-bottom-text {
      width: 72px;
      height: 25px;
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      line-height: 0px;
      color: #3386fe;
      opacity: 1;
    }
    .info-bottom-box {
      margin-top: 10px;
      width: 815px;
      height: 350px;
      background: rgba(240, 240, 246, 0.5);
      border: 1px solid #d8d8d8;
      opacity: 1;
      border-radius: 5px;
    }
  }
}
</style>